<!-- 单页面需要多个上传组件 -->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :title="title"
    >
        <!-- list-type="picture" -->
      <el-upload
        :action="$store.state.baseUrl + 'system/file/uploadFile'"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="list"
        name="file"
        multiple
        :on-exceed="handleExceed"
        :limit="limit"
        :data="{ module: 'wzwood', type: uploadType }"
        :on-success="handleAdd"
        :headers="{ token: $store.state.token }"
      >
        <!-- <i class="el-icon-plus"></i> -->
        <el-button size="small" type="primary" v-if="type == 'upload'"
          >点击上传</el-button
        >
    
        <!-- <div slot="file" slot-scope="{ file }">
          <el-image
            v-if="file.url"
            class="el-upload-list__item-thumbnail"
            :src="file.url"
            :preview-src-list="[file.url]"
          >
          </el-image>
        </div> -->
      </el-upload>
          <el-button style="margin-top:20px" size="small" @click="batchSubmit" type="primary" v-if="totalUp"
          >全部保存提交</el-button
        >
      <el-dialog :append-to-body="true" :visible.sync="dialogVisible4">
        <img
          width="100%"
          :src="dialogImageUrl"
          :preview-src-list="[dialogImageUrl]"
          alt=""
        />
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "upload",
  props: {
    dialogVisible: false,
    totalUp: false,
    list: Array,
    uploadType: {
      type: String,
      default: "",
    },
    limit: {
      type: Number,
      default: 9999,
    },
    type: {
      type: String,
      default: "upload", //upload 上传 look 查看
    },
    title: {
      type: String,
      default: "上传文件",
    },
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible4: false,
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制上传 1 个文件，本次选择了 ${files.length} 个文件，文件总数 ${
          files.length + fileList.length
        } `
      );
    },
    handlePictureCardPreview(file) {
      console.log(file);
      if (file.url.indexOf("http") == -1) {
        //老数据转换
        file.url = this.$store.state.openUrl + this.lookUrl(file.url);
      }
      if (file.url.indexOf("pdf") != -1) {
        window.open(file.url);
      } else {
        this.dialogVisible4 = true;
        this.dialogImageUrl = file.url;
      }
    },
    lookUrl(url) {
      //木材老数据附件 转换格式
      var url_new = url.split("_");
      var url_type = url_new[0];
      if (url_new.length == 2) {
        var dir1 = url_new[1].substr(0, 4);
        var dir2 = url_new[1].substr(4, 2);
        var dir3 = url_new[1].substr(6, 2);
        return (
          "/Uploads/" +
          url_type +
          "/" +
          dir1 +
          "/" +
          dir2 +
          "/" +
          dir3 +
          "/" +
          url
        );
      }
    },
    handleRemove(file) {
      this.$emit("handleRemove", file);
    },
    handleAdd(response, file, fileList) {
      console.log("上传成功", response, file, fileList);
      this.$emit("handleAdd", fileList, response);
    },
    batchSubmit() {
      console.log("全量提交",);
      this.$emit("batchSubmit");
    },
    closeDialog() {
      console.log("close", this.title);
      this.$emit("close");
    },
  },
};
</script>
